import React, { useState ,useEffect} from 'react';
import axios from 'axios';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import RefreshIcon from '@mui/icons-material/Refresh';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import PersonIcon from '@mui/icons-material/Person';



export default function Content() {
  const [open, setOpen] = React.useState(true);
  const [rows2, setRows2] = useState([]);
  useEffect(() => {
    axios.get('http://172.24.56.192:5000/index/userinfo',{headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then(function (response) {
                    // 这里是处理响应的代码
                  // var code = response['code']
                  setRows2(response.data['data']);
                  console.log(response.data);
                    
                })
                .catch(function (error) {
                    // 这里是处理错误的代码
                  // window.location.href="https://www.baidu.com/"
                    console.log(error);
                  
                });},[]);
  

  const handleClick = () => {
    setOpen(!open);
  };
  return (
    <Paper sx={{ maxWidth: 2100, margin: 'auto', overflow: 'hidden' }}>
      
          <List
            sx={{ width: '100%', maxWidth: 2000, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
          >
            <Grid container spacing={2}>
              <Grid item xs={1}> 
                <ListItemButton>
                  <ListItemIcon>
                    <DraftsIcon />
                  </ListItemIcon>
                  <ListItemText primary="email" primaryTypographyProps={{color: 'primary'}}/>  
                </ListItemButton>
              </Grid> 
              <Grid item xs>
                <ListItemButton>
                  <ListItemText primary={rows2['email']}/>  
                </ListItemButton> 
              </Grid>  
            </Grid>
              <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                  <PersonIcon />
                </ListItemIcon>
                <ListItemText primary="My Persona" primaryTypographyProps={{color: 'primary'}}/>
                {open ? <ExpandLess /> : <ExpandMore />}
              </ListItemButton>
              <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" >
                  <Grid container spacing={2}>
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Name:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['Username']}/>  
                      </ListItemButton>
                    </Grid>
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Gender:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['cla']}/>  
                      </ListItemButton>
                    </Grid>    
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Age:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['age']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Risk appetite:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['risk']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Scale of investment:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['invest_size']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Investment experience:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['invest_exp']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Trading preferences:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['trade_per']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Stocks focusing:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['aim_market']}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={2}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary="Investment target:" primaryTypographyProps={{color: 'primary'}}/>  
                      </ListItemButton>
                    </Grid>  
                    <Grid item xs={10}>
                      <ListItemButton sx={{ pl: 4 }}>
                          <ListItemText primary={rows2['invest_aim']}/>  
                      </ListItemButton>
                    </Grid>  
                  </Grid>  
                </List>
              </Collapse>
          </List>



          
    </Paper>
  );
}

